<template>
    <van-field
            v-model="formValue"
            :name="name"
            :label="label"
            :placeholder="placeholder"
            :rules="[{ validator: checkIsNotEmpty, message: isEmptyFail }]"
    >
        <slot></slot>
    </van-field>
</template>

<script>
export default {
  name: 'WlVanField',
  data () {
    return {
      formValue: ''
    }
  },
  props: {
    value: {
      type: String,
      default: () => {
        return ''
      }
    },
    name: {
      type: String,
      default: () => {
        return ''
      }
    },
    placeholder: {
      type: String,
      default: () => {
        return ''
      }
    },
    label: {
      type: String,
      default: () => {
        return ''
      }
    },
    isEmptyFail: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  methods: {
    checkIsNotEmpty (val) {
      if ((val === '' || !val) && this.isEmptyFail !== '') {
        this.failNotice(this.isEmptyFail)
        return false
      } else {
        return true
      }
    },
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    }
  },
  watch: {
    formValue (val) {
      this.$emit('change', val)
    }
  }
}
</script>

<style scoped>

</style>
